<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            width: 1000px;
            background-color: #999;
            margin: 0 auto;
            text-align: center;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        input {
            margin: 0 auto;
            border: 0;
            outline: none;
            width: 300px;
            height: 30px;
            
        }

        .listtodo,
        .listdone {
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #000;
        }

        .listtodo p,
        .listdone p {
            width: 800px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;

        }

        .listtodo span,
        .listdone span {
            line-height: 50px;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    
    <div class="big">
        <input type="text" @keydown.13="rander"  v-model="smalllist.title" placeholder="">
        <div class="box">
            <div class="listtodo" v-for="(item,index1) in arrnodo">
                <p >{{item.title}}</p>
                <span @click = "dele(arrnodo,index1)">删除</span>
                <span @click = "done(index1)">完成</span>
               
            </div>
            <div class="listdone" v-for="(item,index2) in arrdone">
                <p >{{item.title}}</p>
                <span @click = "dele(arrdone,index2)">删除</span>
                <span @click = "tonodo(index2)">未完成</span>
            </div>
        </div>
    </div>
        <script src="../js/vue.js"></script>
        <script>
        
            new Vue({
                el: ".big"
                ,
                data() {
                    return {
                        arrdone: [],
                        arrnodo: [],
                        smalllist: {
                            title : ""
                        }
                    }
                }
                ,
                methods: {
                    rander(e) {
                        console.log(1);
                        this.arrnodo.splice(0, 0 ,this.smalllist)
                        this.smalllist = {
                            title : "" 
                        }
                        console.log(e.target);
                        e.target.value = ""
                    },
                    done(index){
                        console.log(this.arrnodo);
                        console.log(index);
                        console.log(this.arrnodo[index]);
                        this.arrdone.splice(0,0,this.arrnodo[index])
                        this.arrnodo.splice(index,1)
                       
                    },
                    tonodo(index){
                        this.arrnodo.splice(0,0,this.arrdone[index])
                        this.arrdone.splice(index,1)
                    },
                    dele(where,index){
                        where.splice(index,1)
                    },
                    // change(e,index){
                    //     console.log(e);
                    //     e.target= "input"
                    //     console.log(e.target);
                    // }
                }
            })
        </script>
</body>

</html>